<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    <todo>-->
<!--        <todo-title slot="todo_title" :title="title1"></todo-title>-->
<!--        <todo-body slot="todo-body"></todo-body>-->
<!--    </todo>-->


    <todo>
        <todo_title slot="todo_title1" :title2="title1"></todo_title>
        <todo_body slot="todo_body2" v-for="item in items" :index="item"></todo_body>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 插槽
// 定义组件
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo_title1"></slot>\
                        <ul>\
                          <slot name="todo_body2"></slot>\
                        </ul>\
                   </div>'
    });
    // 定义组件
    Vue.component("todo_title",{
        props: ['title2'],
        template: '<h4>{{title2}}</h4>'
    });
    // 定义组件
    Vue.component("todo_body",{
        props: ['index'],
        template: '<li>{{index}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title1:"hello vue!",
            items: ["张三","李四","王五"]
        }
    });



</script>
</body>
</html>